<script setup lang="ts">
const modelValue = defineModel<string>();

const emit = defineEmits(["search", "add"]);
</script>

<template>
  <div
    class="flex flex-col justify-between items-start gap-y-2 lg:items-center lg:flex-row lg:gap-y-0"
  >
    <AdminPageTitle><slot name="title"></slot></AdminPageTitle>

    <slot>
      <div
        class="flex flex-col justify-end items-start w-full gap-y-2 lg:items-center lg:flex-row lg:gap-x-2 lg:gap-y-0 lg:w-auto"
      >
        <form
          autocomplete="off"
          class="flex justify-start items-center gap-x-1 w-full"
          @submit.prevent="emit('search')"
        >
          <div
            class="flex justify-between items-center gap-x-1 border rounded bg-white px-3 py-1.5 grow"
          >
            <input
              class="outline-none bg-transparent"
              required
              placeholder="输入关键字"
              v-model="modelValue"
            />
            <button type="button" @click="modelValue = ''">
              <Icon
                name="uil:times"
                class="text-gray-500"
                :class="{
                  'visible opacity-100': modelValue,
                  'invisible opacity-0': !modelValue,
                }"
              />
            </button>
          </div>
          <slot name="search-menu"></slot>

          <button
            class="bg-gray-700 border text-white rounded px-3 py-1.5 flex justify-start items-center gap-x-1 shrink-0 disabled:bg-gray-700/70 disabled:cursor-not-allowed"
            :disabled="modelValue ? false : true"
          >
            <Icon name="uil:search" />
            <div>搜索</div>
          </button>
        </form>

        <button
          class="bg-teal-700 border text-white rounded px-3 shrink-0 py-1.5 flex justify-center items-center gap-x-1 w-full lg:w-auto lg:justify-start"
          @click="emit('add')"
        >
          <Icon name="uil:plus" />
          <div>添加</div>
        </button>
      </div>
    </slot>
  </div>
</template>
